<template>
	<view class="content bg-#F6F9F8 h-100vh photo_back">

		<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" />

		<view class="photo_s3_1">
			<view class="photo_s3_1_1" :class="s3_1" @tap="sectionChange(2)">我是男性</view>
			<view class="photo_s3_1_1" :class="s3_2" @tap="sectionChange(1)">我是女性</view>
		</view>


		<view class="photo_s3_2">
			<u-swiper :list="tem_list" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="5"
				bgColor="transparent" height="640rpx" imgMode="aspectFill"  @change="temChange">
			</u-swiper>
		</view>
		<view class="photo_s3_4">
			<view class="photo_s3_4_one_1" :class="choose_radio" @tap="choose_this"></view>
			<view class="photo_s3_4_one_2" @tap="choose_this">选择此模板</view>
			<view class="photo_s3_4_one_3">
				已选 <text>{{tem_choose.length}}</text> / 5张
			</view>

		</view>
		<view class="photo_s3_5">
			可选多个模板同时生成多张照片
		</view>

		<view class="photo_s3_6">
			<view class="photo_s3_6_1">我的形象</view>
			<view class="photo_s3_6_2">( {{model_data.have_model_number}}  / {{model_data.photo_model_number}})</view>
		</view>

		<view class="photo_s3_7" v-if="model_data.have_model_number == 0 || again_model == 1">
			首次拍摄需要拍<text>5张</text>头像用于AIGC服务
		</view>

		<view class="photo_s3_8" v-if="model_data.have_model_number == 0 || again_model == 1">
			<view class="photo_s3_8_one" v-for="(item,index) in photo_list" :key="index">		
				
				<view class="photo_s3_8_one_1" v-if="item.status == 1" @tap="this.redirectTo(`/pagesB/photo/photo_step_2?spot_id=${spot_id}&points_id=${points_id}&i=${index}&again=1&am=${again_model}`);">
					<image :src="item.url" />
				</view>
				<view class="photo_s3_8_one_2"  v-if="item.status == 1" @tap="this.redirectTo(`/pagesB/photo/photo_step_2?spot_id=${spot_id}&points_id=${points_id}&i=${index}&again=1&am=${again_model}`);">
					<image src="/static/images/photo_18.png" />
				</view>
				
				<view class="photo_s3_8_one_1"  v-if="item.status == 0"  @tap="this.redirectTo(`/pagesB/photo/photo_step_2?spot_id=${spot_id}&points_id=${points_id}&i=${index}&again=0&am=${again_model}`);">
					<image src="/static/images/photo_19.png" />
				</view>
				
			</view>			
		</view>
		
		<view class="photo_s3_10" v-if="model_data.have_model_number != 0 && again_model != 1">
			<view class="photo_s3_10_1" v-if="model_data.model_list[0].status == 3">
				<image :src="rec_url+ model_data.model_list[0].model_image_thumbnail" mode="aspectFill"/>
			</view>
			<view class="photo_s3_10_2" v-if="model_data.model_list[0].status == 3" @tap="do_again_model">
				<image src="/static/images/photo_22.png" />
			</view>
			<view class="photo_s3_10_3" v-if="model_data.model_list[0].status != 3">
				<view class="photo_s3_10_3_1">
					<image src="/static/images/photo_24.gif" />
				</view>
				<view class="photo_s3_10_3_2">
					<view>形象生成中</view>
					<view>请耐心等待</view>
				</view>
			</view>
		
		</view>
		
		
		<view class="photo_s3_9">
			<view class="photo_s3_9_1" @tap="subRead">
				<view class="photo_s3_9_1_1" :class="readed"></view>
				<view class="photo_s3_9_1_2">我已阅读<text>《肖像权协议》</text>，并同意云梦智慧游使用照片</view>
			</view>
			<view class="photo_s3_9_2" @tap="do_sub">
				立即生成
			</view>
		</view>
		
		
		<view class="photo_s3_12" v-show="show_loading">
			<view class="photo_s3_12_main">
				<view class="photo_s3_12_main_1">照片正在生成中</view>
				<view class="photo_s3_12_main_2">首次生成时间较久，请耐心等待</view>
				<view class="photo_s3_12_main_3">
					<image :src="rec_url+`/ai_tour/assets/photo/c40b0341-4289-4f7c-bb4f-6e36f2c3599a.gif`"/>
				</view>
				<View class="photo_s3_12_main_4" v-if="show_type == 'photo'">
					您可以在“我的”页面查看所有生成结果
				</View>
				<View class="photo_s3_12_main_4" v-if="show_type == 'model'">
					您可以稍后进入该页面查看头像模型
				</View>
			</view>
			
			<view class="photo_s3_12_foot" @tap="navigateTo(`/pages/home/index`)">
				返回首页
			</view>
			
			<!-- 
			<view class="photo_s3_12_foot" @tap="navigateTo(`/pagesB/photo/photo_step_4?spot_id=${spot_id}&points_id=${points_id}&i=${index}&again=1)`">
				返回首页
			</view> -->
			
		</view>
	</view>

</template>

<script>
	import {
		redirectTo,
		navigateTo,
		navigateBack
	} from "@/hooks";
	import custom_navbar from "./components/photo.vue";
	import { getTemplateSet,getModelSet,aiPhotoInitiate} from '@/api/home';
	// import uParse from '@/components/u-parse/u-parse.vue';
	import store from "@/store";



	export default {
		components: {
			custom_navbar
			// uParse
		},
		data() {
			return {
				readed:'',
				points_id: '',
				spot_id: '',
				navigateTo,
				redirectTo,
				navigateBack,
				navbar_title: "AI旅拍",
				statusBarHeight: 20,
				curNow: 1,
				model_data:{},
				again_model:0,
				s3_1: '',
				s3_2: '',
				tem_list: [],//模板列表
				tem_data :[],//模板数据
				tem_choose: [],//已选择的模板
				tem_curr:'',//当前模板列表
				choose_radio:'',//选中当前模板
				photo_list:[],
				show_loading:0,
				show_type:'',
				theme:'drak'

			};
		},
		computed: {
			rec_url() {
				return this.$store.getters.rec_url;
			},
			
			ai_photo() {
				return uni.getStorageSync('aiPhoto');
			},
		},


		mounted() {
			let that = this;
			const info = uni.getSystemInfoSync();
			that.statusBarHeight = info.statusBarHeight + 43;
			
		},

		onLoad(options) {
			
			this.points_id = options.points_id;
			this.spot_id = options.spot_id;
			this.again_model = options.am ?  options.am : 0;
			this.sectionChange(1)
			//this.errorCamera()
			//this.getTemList();			
			console.log(this.again_model)
		},
		
		
		onShow(){
			this.setPhotoList();
			this.getModel();
			
		},
		
		
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.theme = 'white';
		
			} else {
		
				this.theme = 'drak';
			}
		},
		
		
		methods: {
			
			do_again_model(){
				this.again_model = 1;
			},
			
			setPhotoList(){
				let storePhoto = this.ai_photo;
				console.log('!!!!!!!',storePhoto);
				if(!storePhoto){
					let t = [];
					for(var i =0; i<=4 ;i++){
						let t1 ={};
						t1.status = 0;
						t1.url = '';
						t.push(t1);
					}
					this.photo_list = t;
				}else{
					if(storePhoto.length >=5 ){
						let t = [];
						
						for(var i =0; i<=4 ;i++){
							let t1 ={};
							t1.status =1;
							t1.url = storePhoto[i];
							t.push(t1);
						}
						
						this.photo_list = t;
					}else{
						let t = [];
						
						for(var i =0; i<=4 ;i++){
							let t1 ={};
							if(storePhoto[i]){
								t1.status =1;
								t1.url = storePhoto[i];
							}else{
								t1.status = 0;
								t1.url = '';
							}
							t.push(t1);
						}
						
						this.photo_list = t;
					}				
				}
			},
			
			
			
			subRead(){
				if(this.readed){
					this.readed = '';
				}else{
					this.readed = 'on';
				}
				
			},
			
			async getModel(){
				let res  = await getModelSet();
				
				if(res.code == 200){
					this.model_data = res.data;					
				}
			},
			
			async getTemList() {
				let param = {};
				param.spot_id = this.spot_id;
				param.points_id = this.points_id;
				param.sex = this.curNow;
				let res  = await getTemplateSet(param);
				
				if(res.code == 200 && res.data.length > 0 ){
					let t_list = [];
					
					res.data.forEach((item)=>{
						t_list.push(this.rec_url+'/'+item.template);
					})
					
					this.tem_data = res.data;
					this.tem_list  = t_list;
					this.tem_curr = 0;
				}

			},

			// 获取头的高度
			getNavHeight(e) {
				this.NavHeight_infoHeight += e;
			},

			sectionChange(index) {
				if (index == 2) {
					this.s3_1 = 'on';
					this.s3_2 = '';
				} else {
					this.s3_2 = 'on';
					this.s3_1 = '';
				}
				this.curNow = index;
				this.getTemList();
				
			},

			choose_this(){
				
				let this_data = this.tem_data[this.tem_curr];
				
				if(this_data){
					let sta = this.tem_choose.includes(this_data.id);
					if(sta){
						let index = this.tem_choose.indexOf(this_data.id);
						if (index > -1) {
						  this.tem_choose.splice(index, 1); // 从索引位置删除1个元素
						  this.choose_radio = '';
						}
						
					}else{
						 this.tem_choose.push(this_data.id);
						 this.choose_radio = 'on';
					}
				}
				
			},
			
			temChange(e){
				
				
				this.tem_curr = e.current;
				let this_data = this.tem_data[this.tem_curr];
				
				if(this_data){
					let sta = this.tem_choose.includes(this_data.id);
					if(sta){
						this.choose_radio = 'on';
						
					}else{
						this.choose_radio = '';
					}
				}
				
				console.log('---------------',this.tem_curr);
				
				
			},
			
			async do_sub(){
				if(!this.readed){
					uni.showToast({
					  title: '请阅读并同意协议',
					  icon: 'none',					 
					});
					return false;
				}
				
				if(!this.spot_id || !this.points_id){
					uni.showToast({
					  title: '获取景点信息错误!',
					  icon: 'none',					 
					});
					return false;
				}
				
				
				if(this.tem_choose.length < 1){
					uni.showToast({
					  title: '请至少选择一个模板!',
					  icon: 'none',					 
					});
					return false;
				}
				
				
				
				let param = {};
				param.spot_id = this.spot_id;
				param.points_id = this.points_id;
				param.sex = this.curNow;
				param.template_images = this.tem_choose;
				if(this.again_model == 1 || this.model_data.have_model_number == 0){
					//合成模型/重置模型
					let user_photo =[];
					this.photo_list.forEach((item,index)=>{
						if(item.status == 1 && item.url){
							user_photo.push(item.url);
						}
					})
					
					if(user_photo.length < 5){
						uni.showToast({
						  title: '请拍摄5张头像!',
						  icon: 'none',					 
						});
						return false;
					}
					
					
					param.user_images = user_photo;
					param.yun_model_ids = [];
					
					this.show_type = 'model';
					
				}else{
					param.user_images =[];
					param.yun_model_ids = [];
					param.yun_model_ids.push(this.model_data.model_list[0].yun_model_id)
					
					this.show_type = 'photo';
				}
				
			
				let res = await aiPhotoInitiate(param);
				console.log('!@@@@@@@@@@',this.show_type)
				this.show_loading = 1;
			}

		}
	}
</script>

<style lang="scss" scoped>
	 @import './this.scss';
	
	image{
		width: 100%;
		height: 100%;
	}
	// ---------------step3---------------------
	.photo_s3_1{
		display: flex;
		justify-content: space-between;
		border-radius: 36rpx;
		width:364rpx;
		height: 76rpx;
		margin: 36rpx auto 0 auto;	
		background: linear-gradient( 90deg,  rgba(183,228,71,0.88) , rgba(33,188,145,0.8));
		
		.on{
			background: linear-gradient( 90deg, #0CCA91 0%, #0FBCD6 100%);
			color: #fff !important;
			font-weight: bold;
		}
	
		.photo_s3_1_1{
			border-radius: 36rpx;
			width: 50%;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color:#3D3D3D;
			font-size: 26rpx;
			//     transition: -webkit-transform 1s;
			//     transition: transform 1s;
			//     transition: transform 1s, -webkit-transform 1s;
			
		}
	}
	
	
	.photo_s3_2{
		height: 640rpx;
		width: 90%;
		margin: 30rpx auto;	
		
	}
	
	.photo_s3_4{
		width:400rpx;
		height: 52rpx;
		left:155rpx;
		z-index: 999999;
		margin-top: -90rpx;
		position: absolute;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 20rpx;	
		border-radius: 29rpx;
		background-color: rgba(0,0,0,0.4);
		
		
		.photo_s3_4_one_1{
			background: url('/static/images/photo_17.png') no-repeat;		
			background-size: 100% 100%;
			height: 32rpx;
			width: 32rpx;
		}
		
		.on{
			background: url('/static/images/photo_16.png') no-repeat;
			background-size: 100% 100%;
			height: 32rpx;
			width: 32rpx;
		}
		
		.photo_s3_4_one_2{
			font-size: 24rpx;
			color: #fff;
			margin-left: 10rpx;
			
			
		}
		.photo_s3_4_one_3{
			font-size: 24rpx;
			color: #fff;
			margin-left: 100rpx;
			text{
				margin-left: 10rpx;
				color: #0CCA91;
				margin-right: 10rpx;
			}
			
			
		}
	}
	
	.photo_s3_5{
		width: 100%;
		display: flex;
		justify-content:  center;
		color: #999999;
		font-size: 24rpx;
	}
	
	.photo_s3_6{
		width: 100%;
		display: flex;
		margin-top: 70rpx;
		justify-content: center;
		align-items: center;
		.photo_s3_6_1{
			color: #3D3D3D;
			font-size: 32rpx;
		}
		
		.photo_s3_6_2{
			color: #999999;
			font-size: 24rpx;
		}
	}
	
	.photo_s3_7{
		width: 100%;
		display: flex;
		color: #999;
		justify-content: center;
		font-size: 24rpx;
		text{
			color:#0CCA92;
		}
		margin-top: 8rpx;
	
	}
	
	.photo_s3_8{
		width: 94%;
		margin: 36rpx auto 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.photo_s3_8_one{
			width: 128rpx;
			height: 128rpx;
			
			.photo_s3_8_one_1{
				width: 128rpx;
				height: 128rpx;
				z-index: -9;
				border-radius: 15rpx;
				
				image{
					border-radius: 15rpx;
					z-index: -99;
				}	
			}
			
			.photo_s3_8_one_2{
				width: 64rpx;
				height: 32rpx;
				z-index: 9999;
				margin-top: -40rpx;
				margin-left:64rpx ;
				
				background-size: 100% 100%;
			}
		}
	}
	
	.photo_s3_9{
		width: 100%;
		min-height: 200rpx;
		margin-top: 50rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		overflow: hidden;
		.photo_s3_9_1{
			width: 92%;
			margin-left: 4%;
			margin-top: 20rpx;
			display: flex;
			
			align-items: center;
			
			
			.photo_s3_9_1_1{
				margin-right: 10rpx;
				width: 32rpx;
				height: 32rpx;
				background: url('/static/images/photo_20.png') no-repeat;
				background-size: 100%;
			}
			.on{
				background: url('/static/images/photo_16.png') no-repeat;
				background-size: 100%;
			}
			
			.photo_s3_9_1_2{
				margin-left: 20rpx;
				font-size: 24rpx;
				color: #666;
				
				text{
					color:#0CCA92;
				}
			}
			
		}
		
		.photo_s3_9_2{
			margin: 16rpx auto 32rpx auto;
			width: 702rpx;
			height: 80rpx;
			background: linear-gradient( 90deg, #0FBCD6 0%, #0CCA91 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 700;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}
	
	.photo_s3_10{
		width: 192rpx;
		height: 192rpx;
		margin: 16rpx auto;
		border-radius: 16rpx;
		
		.photo_s3_10_1{
			width: 192rpx;
			height: 192rpx;
			z-index: -9;
			border-radius: 16rpx;
			
			image{
				border-radius: 16rpx;
				z-index: -99;
			}	
		}
		
		.photo_s3_10_2{
			width: 108rpx;
			height: 32rpx;
			z-index: 9999;
			margin-top: -34rpx;
			margin-left:84rpx ;
			
			background-size: 100% 100%;
		}
		
		.photo_s3_10_3{
			background-color: #fff;
			width: 192rpx;
			height: 192rpx;
			border-radius: 16rpx;
			overflow: hidden;
			
			.photo_s3_10_3_1{
				width: 60rpx;
				height: 60rpx;
				margin: 20rpx auto;
			}
			
			.photo_s3_10_3_2{
				width: 100%;
				flex-wrap: wrap;
				color:#999999;
				font-size: 24rpx;
				display: flex;
				justify-content: center;
			}
		}
		
	}
	
	.photo_s3_12{
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.6);
		z-index: 999999;
		width: 100%;
		height: 100vh;
		
		.photo_s3_12_main{
			margin-top: 360rpx;
			margin-left: 105rpx;
			border-radius: 32rpx;
			width: 540rpx;
			height: 540rpx;
			background-color: #FBFDFB;
			background: linear-gradient( 180deg, #DFF7F2 0%, #FBFDFB 30%);
			//background: url('/static/images/popup-bg.png') no-repeat;
			background-size:  contain;
			overflow: hidden;
			.photo_s3_12_main_1{
				width: 100%;
				margin-top: 56rpx;
				color: #3D3D3D;
				font-size: 34rpx;
				font-weight: bold;
				display: flex;
				justify-content: center;
			}
			
			.photo_s3_12_main_2{
				width: 100%;
				margin-top: 20rpx;
				color: #666666;
				font-size: 28rpx;
				font-weight: 500;
				display: flex;
				justify-content: center;
			}
			
			.photo_s3_12_main_3{
				width: 540rpx;
				height: 260rpx;
				margin-top: 30rpx;
		
			}
			
			.photo_s3_12_main_4{
				width: 100%;
				margin-top: 20rpx;
				color: #666666;
				font-size: 24rpx;
				font-weight: 500;
				display: flex;
				justify-content: center;
			}
			
		}
		
		.photo_s3_12_foot{
			position: absolute;
			bottom: 100rpx;
			width: 292rpx;
			height: 72rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 2rpx solid #FFFFFF;
			color: #fff;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			left: 229rpx;
			}
	}
	
</style>